<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>Document</title>

  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!--Before-->
<button :disabled="shouldDisable"
        type="button"
        x-data="{
         shouldDisable: false,
         doSomething() {
            console.log('Before');
         }
        }"
        @click="doSomething()">Click Me
</button>

<!--After-->
<button x-bind="SomeButton" x-data></button>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.bind('SomeButton', () => ({
    'x-data'() {
      return {
        shouldDisable: false,
        doSomething() {
          console.log('After')
        }
      };
    },


    type: 'button',
    'x-text'() {
      return 'Click Me';
    },

    '@click'() {
      console.log(this.$el); // 获取 DOM 元素
      this.doSomething()
    },

    ':disabled'() {
      return this.shouldDisable
    },
  }))
})
</script>
</body>
</html>